<template>
  <div class="home">
    <div id="nav">
      <div>
        <h3>按钮样式</h3>
        <sg-button>默认按钮</sg-button>
        <sg-button type="primary">主要按钮</sg-button>
        <sg-button type="success">成功按钮</sg-button>
        <sg-button type="info">信息按钮</sg-button>
        <sg-button type="warning">警告按钮</sg-button>
        <sg-button type="danger">危险按钮</sg-button>
        <sg-button @click="handleClick">点击</sg-button>
      </div>

      <div>
        <h3>按钮大小</h3>
        <sg-button>默认按钮</sg-button>
        <sg-button size="medium">中等尺寸</sg-button>
        <sg-button size="small">中等尺寸</sg-button>
        <sg-button size="mini">中等尺寸</sg-button>
      </div>

      <div>
        <h3>圆角</h3>
        <sg-button round>默认按钮</sg-button>
        <sg-button type="primary" round>主要按钮</sg-button>
        <sg-button type="success" round>成功按钮</sg-button>
        <sg-button type="info" round>信息按钮</sg-button>
        <sg-button type="warning" round>警告按钮</sg-button>
        <sg-button type="danger" round>危险按钮</sg-button>
        <sg-button @click="handleClick" round>点击</sg-button>

       <h3>圆角图标</h3>
        <sg-button icon="icon-chaxun" circle></sg-button>
        <sg-button type="primary" icon="icon-songyadanwei" position="left" circle></sg-button>
        <sg-button type="success" icon="icon-yuyuejieguo" circle></sg-button>
        <sg-button type="info" icon="icon-yaopinguanli" circle></sg-button>
        <sg-button type="warning" icon="icon-qiandai" circle></sg-button>
        <sg-button type="danger" icon="icon-yonghu" circle></sg-button>
      </div>

      <div>
        <h3>左右图标</h3>
        <sg-button round>默认按钮</sg-button>
        <sg-button type="primary" icon="icon-songyadanwei" position="left" round>主要按钮</sg-button>
        <sg-button type="success" icon="icon-yaopinguanli" position="right" round>成功按钮</sg-button>
      </div>

      <div>
        <h3>loading图标</h3>
        <sg-button type="primary" icon="icon-jiazai" position="left" round>主要按钮</sg-button>
      </div>

      <div>
        <h3>禁用状态</h3>
        <sg-button disabled>默认按钮</sg-button>
        <sg-button type="primary" disabled>主要按钮</sg-button>
        <sg-button type="success" disabled>成功按钮</sg-button>
        <sg-button type="info" disabled>信息按钮</sg-button>
        <sg-button type="warning" disabled>警告按钮</sg-button>
        <sg-button type="danger" disabled>危险按钮</sg-button>
      </div>

    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {

  },
  methods: {
    handleClick () {
      console.log(111111)
    }
  }
}
</script>
